<html>
    <head>
        <title>jQuery.validity</title>
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
    
        <link rel="SHORTCUT ICON" href="favicon.ico"/>
    
        <link rel="stylesheet" type="text/css" href="css/carousel.css" />
        <link rel="stylesheet" type="text/css" href="css/css.css" />
        
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.infinitecarousel.js"></script>
        <script type="text/javascript" src="js/js.js"></script>
        <script type="text/javascript" src="lib/src.js"></script>
        
        <script type="text/javascript" src="lib/prettify.js"></script>
        <script type="text/javascript" src="lib/lang-css.js"></script>
        <link rel="stylesheet" type="text/css" href="lib/prettify.css" />
        <script type="text/javascript">
            $(function() { 
                prettyPrint(); 
            });
        </script>
    </head>
    <body>
        
            <div id="main">
                <div id="header">
                    <img id="logo" src="img/validity.logo.png" alt="Validity" />
                    <div id="nav">
                        <a href="/">Home</a> |
                        <a href="Demos/index.htm">Documentation</a> |
                        <a href="http://blog.thatscaptaintoyou.com/">Blog</a> |
                        <a href="http://code.google.com/p/validity/downloads/list" target="_none">Download</a>
                    </div>
                    <h1>jQuery.validity</h1>
                    <h2>Get validation right, the first time.</h2>
                    
                </div>
                
                <div id="carousel">
                    <ul>
                        <li>
                            
                            <img alt="" src="images/slide1.png" width="800" height="400" />
                            <div style="position:relative;top:-260px;width:360px;text-align:left;left:0px;">
                                <h2>
                                    jQuery.validity is a jQuery plugin for powerful, accurate client-side form validation.
                                    <br/>
                                    It is well-organized, versatile and can easily tackle any validation problem.
                                </h2>
                            </div>
                        </li>
                        <li>
                            <img alt="" src="images/slide2.png" width="800" height="400" />
                            <div style="position:relative;top:-380px;width:440px;text-align:left;left:350px;">
                                <h3>
                                    jQuery.validity is cleaner than alternatives:
                                </h3>
                                <h4>
                                    Configuring validation can be 100% unobtrusive.
                                    You won't need to include non-semantic markup or use ugly, unmanageable classes.
                                </h4>
                                <h3>
                                    With jQuery.validity, setting up validation could be as concice as...
                                </h3>
                            </div>
                        </li>
                        <li>
                            <img alt="" src="images/slide3.png" width="800" height="400" />
                            <div style="position:relative;top:-320px;width:780px;text-align:left;left:30px;">
                                <h2 style="width:440px;">
                                    jQuery.validity is easy to install and lightweight:
                                </h2>
                                <h3 style="padding-left:20px;width:440px;">
                                    The JavaScript is only <u>11KB</u>. Validity won't slow down your page.
                                </h3>
                                <h2>
                                    
                                </h2>
                                <a id="carouselDownload" href="http://code.google.com/p/validity/downloads/list" target="_none" style="position:absolute; top:170px; right:85px;">
                                    <h2>Download...</h2>
                                    <h5>http://code.google.com/p/validity/</h5>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <h2 style="text-align:left; margin:0; margin-top:50px;">
                    What is it?
                </h2>

                <p>
                    <b>jQuery.validity is an elegant and powerful jQuery plug-in</b> you can use to 
                    setup client-side form validation. Instead of writing validation manually or 
                    balancing some unwieldy server-side framework, validity allows you to design 
                    client-side validation in a manner that feels natural and straightforward.
                </p>
                
                <p>
                    <b>jQuery.validity is easy to learn and use.</b> It's totally appropriate in 
                    simple validation scenarios, but it's also designed to cleanly and naturally 
                    tackle more complex, dynamic, or conditional scenarios.
                </p>
                
                <p>
                    <b>jQuery.validity takes advantage of jQuery's selector engine</b> to perform 
                    validation on logical groupings of inputs, making it declarative and clean. 
                    This means that the inputs on a page can be added, removed, or changed and 
                    validation will still work without reconfiguration.
                </p>
                
                <p>
                    <b>jQuery.validity is designed to give you total control</b> over how validation 
                    messages appear, so you can easily adapt the way validation errors 
                    are displayed to the look and feel of your site.
                </p>
                
                <p style="margin-top:50px;">
                    In short, Validity was conceived with three goals:
                </p>
                
                <ol>
                    <li>
                        <strong>Easy Setup:</strong> Validity employs the principle of <em>Convention Over Configuration</em> to
                        keep code manageable and semantic. Very little work is required to put Validity on your page.
                    </li>
                    <li>
                        <strong>Unobtrusive JavaScript:</strong> Using Validity will have almost no effect on your markup. 
                        Additionally, Validity will degrade gracefully - leaving no residuals in browser
                        environments where JavaScript is disabled or unsupported.
                    </li>
                    <li>
                        <strong>Customizable Appearance:</strong> Validity delivers a solid core-library of 
                        validation tools that can be used in any web-design. So, in order to be truly versatile, Validation logic is separated
                        from the way it displays errors. With Validity, you, the developer, have full control
                        of error handling and adapting it to the design of your page.
                    </li>
                </ol>

                <h2 style="text-align:left; margin:0; margin-top:50px;">
                    Try it!
                </h2>
                
                <p>
                    Below is a live example. The first field is required, and must be a number between 4 and 12. The second field 
                    must be a date before today:
                </p>

                
                <!--<iframe src="lib/simple.htm" ></iframe>-->
                
                <div class="ex_w_src" style="text-align:left;">
                    <div>[<a href="#_">View Source</a>]</div>
                    <iframe id="setup-iframe" src="lib/simple.htm" frameborder="0"></iframe>
                    <pre id="setup-src" class="prettyprint lang-html">
    &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;Simple&lt;/title&gt;
            
            &lt;link type="text/css" rel="Stylesheet" href="jquery.validity.css" /&gt;
            &lt;script type="text/javascript" src="jquery.js"&gt; &lt;/script&gt;
            &lt;script type="text/javascript" src="jquery.validity.js"&gt; &lt;/script&gt;
            
            &lt;script type="text/javascript"&gt;
            
                //
                // This is where validation rules are assigned:
                //
                
                $(function() { 
                
                    $("form").validity(function() {
                    
                        $("#vehicles")
                            .require()
                            .match("number")
                            .range(4, 12);
                        
                        $("#dob")
                            .require()
                            .match("date")
                            .lessThanOrEqualTo(new Date());
                            
                    });
                    
                });
                
                //
                // That's it!
                // No more setup is necessary!
                //
                
            &lt;/script&gt;
            
        &lt;/head&gt;
        
        
        &lt;body&gt;
        
            &lt;form method="get" action="simple.htm"&gt;
                Number of Vehicles:
                &lt;input type="text" id="vehicles" name="vehicles" title="Vehicle Count" /&gt;
                &lt;br /&gt;&lt;br /&gt;
                Date of birth:
                &lt;input type="text" id="dob" name="dob" title="Birthday" /&gt;
                (mm-dd-yyyy)
                &lt;br /&gt;&lt;br /&gt;
                &lt;input type="submit" /&gt;
            &lt;/form&gt;
            
        &lt;/body&gt;
    &lt;/html&gt;
                    </pre>
                </div>
                
                <h2 style="text-align:left; margin:0; margin-top:50px;">
                    Get It!
                </h2>
                
                <p>
                    jQuery.validity is easy to install and lightweight: the JavaScript is only <u>11KB</u>.
                </p>
                
                <a id="downloadLink" href="http://code.google.com/p/validity/downloads/list" target="_none">
                    <h2>Download...</h2>
                    <h5>http://code.google.com/p/validity/</h5>
                </a>
                
                <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <input type="hidden" name="cmd" value="_s-xclick">
                    <input type="hidden" name="hosted_button_id" value="8785624">
                    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
                </form>
                
            </div>



<!-- Google Analytics Hotness -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8413863-2");
pageTracker._trackPageview();
} catch(err) {}</script>            


            
    </body>
</html>